<!-- 报名礼包 -->
<template>
	<div id="gift" class="flex flex-v flex-pack-justify flex-align-center">
        <div class="main-container flex flex-v flex-align-center">
		<div class="item-container" v-for="(item, index) in giftList" :key="index">
				<div class="iconclear_wrap" @click="deleteThisGift(item.id)">
				<i class="iconfont iconclear"></i>
				</div>
                <div class="form-item flex flex-pack-justify flex-align-center">
			<span>服务名称</span>
			<input type="text" :value="item.serviceName" @input="handleServiceNameInput($event, item)" @blur="autoSave(item)" placeholder="15字以内">
                </div>
                <div class="form-item flex flex-pack-justify flex-align-center">
			<span>服务说明</span>
			<input type="text" :value="item.serviceInfo" @input="handleServiceInfoInput($event, item)" @blur="autoSave(item)" placeholder="20字以内">
                </div>
                <div class="form-item flex flex-pack-justify flex-align-center">
			<span>市场参考价格/￥</span>
					<!-- @input="value=value.replace(/[^\d]/g,'')" -->
					<input
						type="number"
						v-model="item.servicePrice"
						@input="handleServicePriceInput($event, item, index)"
						@blur="autoSave(item, 'toast')"
						placeholder="请输入市场参考价格">
                </div>
	</div>
	<div class="item-container add-btn" @click="addAGift" v-show="showAddBtn">
                <i class="iconfont iconicon-test"></i>添加
            </div>
            <span class="gray" v-show="!showAddBtn">最多只能添加10个</span>
        </div>
        <footer class="footer-container">
            <!-- div class="cut-down">
                线上报名礼包优惠总价：
                <span class="price">{{cutDownPrice}}万</span>
            </!-->
            <div class="btn-c"></div>
            <div class="btn-container">
                <div class="btn-container-preview" @click="previewAllGift">预览</div>
                <div class="btn-container-save" @click="saveAllGift">保存</div>
            </div>
        </footer>

        <!-- 线上报名 -->
        <v-onlineSign ref="onlineSign" :dataList="giftList" :isReadonly="true" :owner_user_id="query.owner_user_id"></v-onlineSign>
        <!-- 线上报名 -->
    </div>
</template>

<script>
import OnlineSign from '@/pages/components/onlineSign'
import { getGiftInfo, postSaveGift } from '@/api/gift'
import { getBasicUser } from '@/utils/auth'
export default {
	name: 'Dejoin',
	components: {
		'v-onlineSign': OnlineSign
	},
	data() {
		return {
			giftList: [], // 礼包列表
			giftLimitCount: 10, // 礼包数限制
			flag: 1,
			query: {}
		}
	},
	onLoad(val) {
		this.query = val
	},
	computed: {
		// 获取用户基本信息
		userInfo() {
			return this.$store.state.user.user
		},
		// 优惠总价
		cutDownPrice() {
			let prices = this.giftList.map(item => {
				return item.servicePrice * 1
			})
			let total = 0
			for (let i = 0; i < prices.length; i++) {
				console.log(prices)
				total += parseInt(prices[i])
			}
			return total ? total / 10000 : 0
		},
		// 添加按钮是否显示，礼包数超过限制隐藏
		showAddBtn() {
			if (this.giftList.length > this.giftLimitCount) {
				return false
			}
			return true
		}
	},

	mounted() {
		getBasicUser(this.query.owner_user_id)
		this.init()
	},

	methods: {
		async init() {
			let params = {
				store_id: this.query.owner_user_id
			}
			// 获取礼包信息
			await getGiftInfo(params).then(res => {
				if (res.status === 'success') {
					this.giftList = res.data ? res.data : []
					this.giftList.map(item => {
						item.flag = item.id
					})
				} else {
					this.$toast(res.errors.message)
				}
			})
		},
		// 删除指定礼包
		deleteThisGift(id) {
			this.giftList.map((item, index) => {
				if (item.id === id) {
					this.giftList.splice(index, 1)
				}
				return item
			})
		},
		// 添加一个礼包
		addAGift() {
			// 默认空礼包数据
			let defaultEmptyGift = {
				serviceName: '',
				serviceInfo: '',
				servicePrice: '',
				id: '',
				flag: this.flag++
			}
			this.giftList.push(defaultEmptyGift)
		},
		// 自动保存
		autoSave(item, type = null) {
			if (!item.serviceName) {
				if (type === 'toast') {
					this.$toast('请输入服务名称！')
				}
				return false
			}
			if (!item.serviceInfo) {
				if (type === 'toast') {
					this.$toast('请输入服务说明！')
				}
				return false
			}
			if (item.servicePrice) {
				this.saveAllGift('auto')
			}
		},
		// 保存礼包数组表单
		saveAllGift(type) {
			let params = {
				lists: this.giftList.length === 0 ? '' : this.giftList
			}
			postSaveGift(params).then(res => {
				if (res.status === 'success') {
					if (type === 'auto') {
						this.$toast('自动保存成功！')
					} else {
						this.$toast('保存成功！')
						this.init()
					}
					// ...
				} else {
					this.$toast(res.errors.message)
				}
			})
		},
		// 预览礼包
		previewAllGift() {
			uni.showLoading({
				title: '加载中...'
			})
			this.init().then(() => {
				uni.hideLoading()
				this.$refs.onlineSign.openPopup()
			})
		},
		// 处理服务名称表单
		handleServiceNameInput(e, gift) {
			if (e.target.value.length > 15) {
				e.target.value = e.target.value.substring(0, 15)
			}
			this.giftList.map(item => {
				if (item.flag === gift.flag) {
					item.serviceName = e.target.value
				}
			})
		},
		// 处理服务信息表单
		handleServiceInfoInput(e, gift) {
			if (e.target.value.length > 20) {
				e.target.value = e.target.value.substring(0, 20)
			}
			this.giftList.map(item => {
				if (item.flag === gift.flag) {
					item.serviceInfo = e.target.value
				}
			})
		},
		// 处理服务信息表单
		handleServicePriceInput(e, gift, index) {
			this.$nextTick(() => {
				gift.servicePrice = '' + e.target.value.replace(/[^\d]/g, '')
			})
			// this.giftList.splice(index, 1, gift)
		}
	}
}
</script>
<style lang='scss' scoped>
#gift {
    width: 100%;
    min-height: 100%;
    background: #f5f5f5;
    .main-container {
        width: 100%;
        padding: 15px 0 170px 0;
        .item-container {
            background: #ffffff;
            width: 630px;
            border-radius: 45px;
            padding: 20px;
            margin: 15px 0;
			position: relative;
			.iconclear_wrap {
                position: absolute;
                top: -20px;
                right: -20px;
		width: 60px;
		height: 60px;
		@include direction(center, center);
		}
			.iconclear {
			}
		.form-item {
                width: 100%;
                height: 100px;
                -webkit-box-shadow: 0 1px 0 0 #dddddd;
                -moz-box-shadow: 0 1px 0 0 #dddddd;
                box-shadow: 0 1px 0 0 #dddddd;
                span {
                    color: #666666;
                    font-size: 24px;
                    line-height: 24px;
                }
                input {
                    color: #333333;
                    font-size: 24px;
                    line-height: 45px;
                    border: none;
                    overflow: auto;
                }
            }
        }
        .add-btn {
            color: #ff6900;
            font-size: 24px;
            text-align: center;
            i {
                margin-right: 10px;
            }
        }
        .gray {
            padding: 20px 0;
            color: #666666;
            font-size: 26px;
            line-height: 30px;
        }
    }
    .footer-container {
        width: 100%;
        .btn-container {
            height: 100px;
            color: #3a1b04;
            font-size: 24px;
            word-spacing: 0.6px;
            line-height: 90px;
            text-align: center;
            display: flex;
            align-items: center;
            & > div {
                height: 100%;
            }
            .btn-container-preview {
                width: 50%;
                color: #333;
                background-color: #fff;
            }
            .btn-container-save {
                width:50%;
                background: #ffd11a;
            }
        }
        .cut-down {
            width: 100%;
            height: 70px;
            font-size: 30px;
            line-height: 70px;
            text-align: left;
            padding-left: 42px;
            background: #fff9e3;
            color: #333333;
            .price {
                color: #ff6900;
            }
        }
    }
}
</style>
